<template>
  <div>
  	<div class="go-top">
      <ul class="go-top-container" :style="{ transform: 'translateY(' + scrolled + 'px)' }">
        <li class="go-top-contact">
          <!--在线客服-->
          <div class="go-top-contact-content" @mouseenter="showPopover" @mouseleave="hidePopover">
            {{$t('message.customerService')}}
          </div>
          <div class="go-top-contact-popover" v-if="isShowPopover" @mouseenter="showPopover" @mouseleave="hidePopover">
            <span class="popover-triangle"></span>
            <!--服务热线-->
            <p class="popover-title">{{$t('message.serviceHotline')}}</p>
            <p class="popover-title"><span>02-1054607 to 102/104</span></p>
            <p class="popover-title"><span>02-1054638 to 0</span></p>
            <!--人工客服热线，欢迎来电咨询-->
            <p class="popover-tip">{{$t('message.serviceHotlineDesc')}}</p>
            <!--<p class="popover-title popover-margin">{{$t('message.onlineCustomerService')}}</p>
            <p class="popover-tip">{{$t('message.onlineCustomerServiceDesc')}}</p>-->
            <!--意见反馈-->
            <p class="popover-title popover-margin">{{$tc('message.suggest', 2)}}</p>
            <!--提交您的意见，帮助我们做的更好-->
            <p class="popover-tip">{{$t('message.suggestDesc')}}</p>
            <!--提交反馈-->
            <!-- 暫時注釋，不要删除 -->
            <!-- <button type="button" class="popover-btn popover-consult">{{$t('message.consult')}}</button> -->
            <button type="button" class="popover-btn popover-feedback" @click="showFeedbackDialog">{{$tc('message.suggest', 1)}}</button>
          </div>
        </li>
        <!--帮助中心-->
        <li class="go-top-help" @click="toHelp">
          <div class="go-top-help-content">
            {{$t('message.helpCenter')}}
          </div>
        </li>
        <!--返回顶部-->
        <li class="go-top-top" @click="goTop">
          <div class="go-top-top-content">
            {{$t('message.goTop')}}
          </div>
        </li>
      </ul>
    </div>
    <v-dialog v-if="isShowFeedbackDialog">
      <div class="feedback">
        <div class="feedback-title">{{$t('message.adviseFeedback')}}</div>
        <!--反馈类型-->
        <div class="feedback-label">{{$t('message.feedbackType')}}：</div>
        <div class="feedback-select">
          <v-select-long :tip="selectTip" :selection="feedbackType" @on-select="selectFeedbackType"></v-select-long>
        </div>
        <!--手机号码-->
        <div class="feedback-label">{{$tc('message.phone', 1)}}：</div>
        <div class="feedback-phone">
          <input type="text" v-model="phoneNumber" :placeholder="this.$t('message.phoneHolder')" />
        </div>
        <!--反馈内容-->
        <div class="feedback-label">{{$tc('message.feedbackContent', 1)}}：</div>
        <div class="feedback-textarea">
          <textarea v-model="textareaContent" maxlength="200" :placeholder="this.$t('message.adviseMakeUsBetter')"></textarea>
          <div class="feedback-number">{{ textareaLength }}</div>
        </div>
        <div class="error-tips" v-if="inputError">
          {{ ErrorText }}
        </div>
        <div class="feedback-btn-group" :class="{ 'error-style': inputError }">
          <button type="button" class="feedback-btn feedback-submit" @click="submitIdea">{{$t('message.submit')}}</button>
          <button type="button" class="feedback-btn feedback-cancle" @click="hideFeedbackDialog">{{$t('message.cancel')}}</button>
        </div>
      </div>
    </v-dialog>
    <v-dialog v-if="showTips">
      <div class="tip">
        <div class="tip-close" @click="showTips = false"></div>
        <img src="../../assets/images/icon_success.png" alt="" />
        <div class="tips-text">{{ $t('message.ideaSubSuccess') }}</div>
        <div class="tips-text-small">{{second}}{{ $t('message.automaticClose') }}</div>
      </div>
    </v-dialog>
  </div>
</template>

<script>
import VDialog from '@/components/base/VDialog'
import VSelectLong from '@/components/base/VSelectLong'

export default {
  name: 'GoTop',
  components: {
    VDialog,
    VSelectLong
  },
  data () {
    return {
      phoneNumber: '',
      errorStatus: 0,
      inputError: false,
      scrolled: 0,
      timer: null,
      isStop: false,
      isShowPopover: false,
      isShowFeedbackDialog: false,
      showTips: false,
      second: 3,
      selectTip: this.$t('message.chooseFeedbackType'),
      feedbackType: [this.$t('message.webSideContent'), this.$t('message.user'), this.$t('message.goods'), this.$t('message.websideError')],
      selectType: '',
      textareaContent: '',
      phoneNumberStatus: 0
    }
  },
  watch: {
    showTips (val) {
      if (val) {
        let t = setInterval(() => {
          this.second--
          if (this.second === -1) {
            clearInterval(t)
            this.showTips = false
            this.second = 3
          }
        }, 1000)
      }
    },
    phoneNumber (val) {
      setTimeout(() => {
        if (val === '') {
          this.errorStatus = 2
          this.inputError = true
//        } else if (!/^[0-9]{9,11}$/.test(val)) {
        } else if (!/^[0][689]\d{8}$/.test(val)) {
          this.errorStatus = 3
          this.inputError = true
        } else {
          this.errorStatus = 5
          this.inputError = false
        }
      }, 800)
    },
    textareaContent (val) {
      setTimeout(() => {
        if (/^\s*$/g.test(val)) {
          this.errorStatus = 4
          this.inputError = true
        } else {
          this.errorStatus = 5
          this.inputError = false
        }
      }, 800)
    }
  },
  computed: {
    textareaLength () {
      return this.textareaContent.length + '/200'
    },
    ErrorText () {
      switch (this.errorStatus) {
        case 0:
          return ''
        case 1:
          return this.$t('message.chooseFeedbackType')
        case 2:
          return this.$t('message.phoneNumberNotBlank')
        case 3:
          return this.$t('message.phoneErr')
        case 4:
          return this.$t('message.feedbackContentNotBlank')
        case 5:
          return ''
      }
    }
  },
  methods: {
    submitIdea () {
      if (this.selectType === '') {
        this.errorStatus = 1
        this.inputError = true
        return
      }
      if (this.phoneNumber === '') {
        this.errorStatus = 2
        this.inputError = true
        return
      }
      if (!/^[0][689]\d{8}$/.test(this.phoneNumber)) {
        this.errorStatus = 3
        this.inputError = true
        return
      }
      if (/^\s*$/g.test(this.textareaContent)) {
        this.errorStatus = 4
        this.inputError = true
        return
      } else {
        this.errorStatus = 5
        this.inputError = false
      }
      this.$ajax.userIdeaTickling({
        type: this.selectType,
        mobile: this.phoneNumber,
        content: this.textareaContent
      }).then((res) => {
        if (res.code === 200) {
          this.isShowFeedbackDialog = false
          this.showTips = true
        } else if (res.code === 202) {
          console.log('反馈提交失败')
        }
      })
    },
    toHelp () {
      this.$router.push({ path: '/help' })
    },
    // 使滚动时在线客服弹出框隐藏
    handleScroll () {
      if (this.isStop) {
        clearInterval(this.timer)
      }
      this.isStop = true
      this.isShowPopover = false
    },
    goTop () {
      clearInterval(this.timer)
      // 滚动至顶由快到慢，每30ms向上滚动一个speed
      this.timer = setInterval(() => {
        let curHeight = document.documentElement.scrollTop || document.body.scrollTop
        if (curHeight === 0) {
          clearInterval(this.timer)
        }
        let speed = Math.floor((0 - curHeight) / 7)
        document.documentElement.scrollTop = curHeight + speed
        document.body.scrollTop = curHeight + speed
        this.isStop = false
      }, 30)
    },
    showPopover () {
      clearTimeout(this.timer)
      this.isShowPopover = true
    },
    hidePopover () {
      this.timer = setTimeout(() => {
        this.isShowPopover = false
      }, 300)
    },
    showFeedbackDialog () {
      this.isShowFeedbackDialog = true
      this.isShowPopover = false
      this.textareaContent = ''
      this.phoneNumber = ''
      this.inputError = false
    },
    hideFeedbackDialog () {
      this.isShowFeedbackDialog = false
      this.textareaContent = ''
      this.phoneNumber = ''
      this.inputError = false
    },
    selectFeedbackType (val) {
      this.selectType = val
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped>
.go-top {
	width: 60px;
	position: fixed;
	bottom: 50%;
	right: 0;
	transform: translateY(50%);
	z-index: 10;
}

.go-top-container {
	background-color: #fff;
	padding: 0 6px;
	transition: transform 1s;
}

.go-top-container li {
	padding: 10px 0;
	font-size: 12px;
	line-height: 17px;
	color: #666;
  border-bottom: 1px solid #e0e0e0;
}

.go-top-container li:last-child {
  border-bottom: 0;
}

.go-top-contact {
	position: relative;
}

.go-top-contact-content {
	padding-top: 46px;
	cursor: pointer;
	text-align: center;
	background: url(../../assets/images/icon_contact_normal.png) no-repeat top center;
}

.go-top-contact-content:hover {
	color: #ff600a;
	background: url(../../assets/images/icon_contact_hover.png) no-repeat top center;
}

.go-top-contact-popover {
	width: 360px;
	border: 1px solid #e6e6e6;
	background-color: #fff;
	padding: 29px;
	position: absolute;
	top: 50%;
	left: -452px;
	transform: translateY(-50%);
}

.popover-triangle {
	display: block;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid #e6e6e6;
	position: absolute;
	top: 50%;
	right: -9px;
	margin-top: -8px;
}

.popover-triangle:after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid #fff;
	position: absolute;
	top: -8px;
	left: -9px;
}

.popover-title {
	height: 22px;
	line-height: 22px;
	font-size: 16px;
	color: #333;
	font-weight: bold;
}

.popover-title span {
	color: #ff600a;
	/*margin-left: 8px;*/
}

.popover-margin {
	margin-top: 30px;
}

.popover-tip {
	width:270px;
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #a5a5a5;
	margin-top: 8px;
}

.popover-btn {
	width: 88px;
	height: 38px;
	border: 1px solid #ff600a;
	background-color: #fff;
	color: #ff600a;
	cursor: pointer;
}

.popover-btn:hover {
	background-color: #ff600a;
	color: #fff;
}

.popover-btn:active {
	background-color: #e83700;
	color: #fff;
}

.popover-consult {
	position: absolute;
	top: 115px;
	right: 24px;
}

.popover-feedback {
	position: absolute;
	bottom: 29px;
	right: 29px;
}

.go-top-help-content {
  padding-top: 46px;
  cursor: pointer;
  text-align: center;
  background: url(../../assets/images/icon_help_normal.png) no-repeat top center;
}

.go-top-help-content:hover {
  color: #ff600a;
  background: url(../../assets/images/icon_help_hover.png) no-repeat top center;
}

.go-top-top-content {
	padding-top: 46px;
	cursor: pointer;
	text-align: center;
	background: url(../../assets/images/icon_top_normal.png) no-repeat top center;
}

.go-top-top-content:hover {
	color: #ff600a;
	background: url(../../assets/images/icon_top_hover.png) no-repeat top center;
}

.feedback {
	width: 416px;
	height: 526px;
	padding: 40px 60px;
	background-color: #fff;
}

.feedback-title {
	height: 28px;
	line-height: 28px;
	font-size: 20px;
	text-align: center;
	margin-bottom: 40px;
}

.feedback-label {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	margin-bottom: 12px;
}

.feedback-select {
	margin-bottom: 24px;
}

.feedback-phone {
	height: 48px;
	margin-bottom: 24px;
}

.feedback-phone input {
	width: 100%;
	height: 48px;
	border: 1px solid #d7d7d7;
	border-radius: 2px;
	font-size: 14px;
	padding: 0 15px;
	box-sizing: border-box;
}

.feedback-textarea {
	width: 100%;
	height: 120px;
	position: relative;
}

.feedback-textarea textarea {
	width: 100%;
	height: 120px;
	line-height: 20px;
	border: 1px solid #d7d7d7;
	border-radius: 2px;
	padding: 13px 15px;
	box-sizing: border-box;
	resize: none;
}

.feedback-number {
	height: 20px;
	line-height: 20px;
	color: #a5a5a5;
	font-size: 12px;
	position: absolute;
	bottom: 11px;
	right: 15px;
}

.feedback-btn-group {
	font-size: 0;
	margin-top: 50px;
}

.error-style {
  margin-top: 22px;
}

.feedback-btn {
	width: 200px;
	height: 48px;
	font-size: 16px;
	border-radius: 2px;
	cursor: pointer;
}

.feedback-submit {
	color: #fff;
	border: none;
	background-color: #ff600a;
}

.feedback-submit:hover {
	background-color: #ff3c00;
}

.feedback-submit:active {
	background-color: #e83700;
}

.feedback-cancle {
	color: #a5a5a5;
	border: 1px solid #d7d7d7;
	background-color: #fff;
	margin-left: 16px;
}

.tip {
	width: 480px;
  background: #fff;
  text-align: center;
  padding: 60px 0;
  position: relative;
}

.tip-close {
  width: 16px;
  height: 16px;
  background: url(../../assets/images/icon_close.png) no-repeat;
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
}

.tip img{
  width: 60px;
  height: 60px;
  margin-bottom: 24px;
}
.tips-text{
  font-size: 24px;
  color: #333333;
  line-height: 26px;
  margin-bottom: 12px;
}
.tips-text-small{
  font-size: 14px;
  color: #747474;
  letter-spacing: 0;
}
</style>
